<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>reales | real estate web application</title>

        <link href="css/font-awesome.css" rel="stylesheet">
        <link href="css/simple-line-icons.css" rel="stylesheet">
        <link href="css/jquery-ui.css" rel="stylesheet">
        <link href="css/datepicker.css" rel="stylesheet">
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/app.css" rel="stylesheet">

        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body class="notransition">

        <!-- Header -->

        <div id="header">
            <div class="logo">
                <a href="index.html">
                    <span class="fa fa-home marker"></span>
                    <span class="logoText">reales</span>
                </a>
            </div>
            <a href="#" class="navHandler"><span class="fa fa-bars"></span></a>
            <div class="search">
                <span class="searchIcon icon-magnifier"></span>
                <input type="text" placeholder="Search for houses, apartments...">
            </div>
            <div class="headerUserWraper">
                <a href="#" class="userHandler dropdown-toggle" data-toggle="dropdown"><span class="icon-user"></span><span class="counter">5</span></a>
                <a href="#" class="headerUser dropdown-toggle" data-toggle="dropdown">
                    <img class="avatar headerAvatar pull-left" src="images/avatar-1.png" alt="avatar">
                    <div class="userTop pull-left">
                        <span class="headerUserName">John Smith</span> <span class="fa fa-angle-down"></span>
                    </div>
                    <div class="clearfix"></div>
                </a>
                <div class="dropdown-menu pull-right userMenu" role="menu">
                    <div class="mobAvatar">
                        <img class="avatar mobAvatarImg" src="images/avatar-1.png" alt="avatar">
                        <div class="mobAvatarName">John Smith</div>
                    </div>
                    <ul>
                        <li><a href="#"><span class="icon-settings"></span>Settings</a></li>
                        <li><a href="profile.html"><span class="icon-user"></span>Profile</a></li>
                        <li><a href="#"><span class="icon-bell"></span>Notifications <span class="badge pull-right bg-red">5</span></a></li>
                        <li class="divider"></li>
                        <li><a href="#"><span class="icon-power"></span>Logout</a></li>
                    </ul>
                </div>
            </div>
            <div class="headerNotifyWraper">
                <a href="#" class="headerNotify dropdown-toggle" data-toggle="dropdown">
                    <span class="notifyIcon icon-bell"></span>
                    <span class="counter">5</span>
                </a>
                <div class="dropdown-menu pull-right notifyMenu" role="menu">
                    <div class="notifyHeader">
                        <span>Notifications</span>
                        <a href="#" class="notifySettings icon-settings"></a>
                        <div class="clearfix"></div>
                    </div>
                    <ul class="notifyList">
                        <li>
                            <a href="#">
                                <img class="avatar pull-left" src="images/avatar-1.png" alt="avatar">
                                <div class="pulse border-grey"></div>
                                <div class="notify pull-left">
                                    <div class="notifyName">Sed ut perspiciatis unde</div>
                                    <div class="notifyTime">5 minutes ago</div>
                                </div>
                                <div class="clearfix"></div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="notifyRound notifyRound-red fa fa-envelope-o"></div>
                                <div class="pulse border-red"></div>
                                <div class="notify pull-left">
                                    <div class="notifyName">Lorem Ipsum is simply dummy text</div>
                                    <div class="notifyTime">20 minutes ago</div>
                                </div>
                                <div class="clearfix"></div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="notifyRound notifyRound-yellow fa fa-heart-o"></div>
                                <div class="pulse border-yellow"></div>
                                <div class="notify pull-left">
                                    <div class="notifyName">It is a long established fact</div>
                                    <div class="notifyTime">2 hours ago</div>
                                </div>
                                <div class="clearfix"></div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="notifyRound notifyRound-magenta fa fa-paper-plane-o"></div>
                                <div class="pulse border-magenta"></div>
                                <div class="notify pull-left">
                                    <div class="notifyName">There are many variations</div>
                                    <div class="notifyTime">1 day ago</div>
                                </div>
                                <div class="clearfix"></div>
                            </a>
                        </li>
                    </ul>
                    <a href="#" class="notifyAll">See All</a>
                </div>
            </div>
            <a href="#" class="mapHandler"><span class="icon-map"></span></a>
            <div class="clearfix"></div>
        </div>

        <!-- Left Side Navigation -->

        <div id="leftSide">
            <nav class="leftNav scrollable">
                <div class="search">
                    <span class="searchIcon icon-magnifier"></span>
                    <input type="text" placeholder="Search for houses, apartments...">
                    <div class="clearfix"></div>
                </div>
                <ul>
                    <li><a href="explore.html"><span class="navIcon icon-compass"></span><span class="navLabel">Explore</span></a></li>
                    <li><a href="single.html"><span class="navIcon icon-home"></span><span class="navLabel">Single</span></a></li>
                    <li><a href="add.html"><span class="navIcon icon-plus"></span><span class="navLabel">New</span></a></li>
                    <li class="hasSub">
                        <a href="#"><span class="navIcon icon-drop"></span><span class="navLabel">Colors</span><span class="fa fa-angle-left arrowRight"></span><span class="badge bg-yellow">5</span></a>
                        <ul class="colors">
                            <li><a href="#">Red <span class="fa fa-circle-o c-red icon-right"></span></a></li>
                            <li><a href="#">Green <span class="fa fa-circle-o c-green icon-right"></span></a></li>
                            <li><a href="#">Blue <span class="fa fa-circle-o c-blue icon-right"></span></a></li>
                            <li><a href="#">Yellow <span class="fa fa-circle-o c-yellow icon-right"></span></a></li>
                            <li><a href="#">Magenta <span class="fa fa-circle-o c-magenta icon-right"></span></a></li>
                        </ul>
                    </li>
                    <li class="hasSub">
                        <a href="#"><span class="navIcon icon-layers"></span><span class="navLabel">Elements</span><span class="fa fa-angle-left arrowRight"></span></a>
                        <ul>
                            <li><a href="buttons.html">Buttons</a></li>
                            <li><a href="icons.html">Icons <span class="badge pull-right bg-yellow">841</span></a></li>
                            <li><a href="grid.html">Grid</a></li>
                            <li><a href="widgets.html">Widgets</a></li>
                            <li><a href="components.html">Components</a></li>
                            <li><a href="lists.html">Lists</a></li>
                            <li><a href="tables.html">Tables</a></li>
                            <li><a href="form.html">Form</a></li>
                        </ul>
                    </li>
                    <li class="hasSub">
                        <a href="#"><span class="navIcon icon-link"></span><span class="navLabel">Pages</span><span class="fa fa-angle-left arrowRight"></span></a>
                        <ul>
                            <li><a href="signin.html">Sign In</a></li>
                            <li><a href="signup.html">Sign Up</a></li>
                            <li><a href="profile.html">Profile</a></li>
                            <li><a href="index.html">Homepage Slideshow</a></li>
                            <li><a href="index-map.html">Homepage Map</a></li>
                            <li><a href="blog.html">Blog</a></li>
                            <li><a href="blog-post.html">Blog Post</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
            <div class="leftUserWraper dropup">
                <a href="#" class="avatarAction dropdown-toggle" data-toggle="dropdown">
                    <img class="avatar" src="images/avatar-1.png" alt="avatar"><span class="counter">5</span>
                    <div class="userBottom pull-left">
                        <span class="bottomUserName">John Smith</span> <span class="fa fa-angle-up pull-right arrowUp"></span>
                    </div>
                    <div class="clearfix"></div>
                </a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#"><span class="icon-settings"></span>Settings</a></li>
                    <li><a href="profile.html"><span class="icon-user"></span>Profile</a></li>
                    <li><a href="#"><span class="icon-bell"></span>Notifications <span class="badge pull-right bg-red">5</span></a></li>
                    <li class="divider"></li>
                    <li><a href="#"><span class="icon-power"></span>Logout</a></li>
                </ul>
            </div>
        </div>
        <div class="closeLeftSide"></div>

        <!-- Content -->

        <div id="wrapper" class="full">
            <div id="mapView" class="min"><div class="mapPlaceholder"><span class="fa fa-spin fa-spinner"></span> Loading map...</div></div>
            <div id="content" class="max">
                <div class="tables">
                    <h4>Tables</h4>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
                            <div class="table-overflow">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>USER</th>
                                            <th>ACCOUNT CREATED</th>
                                            <th>STATUS</th>
                                            <th>&nbsp;</th>
                                        </tr>
                                    </thead>
                                    <tbody class="table">
                                        <tr>
                                            <td><span class="userName">John Smith</span></td>
                                            <td>August 24, 2013</td>
                                            <td><span class="label label-success">ACTIVE</span></td>
                                            <td>
                                                <div class="btn-group">
                                                    <a class="btn btn-xs btn-round btn-o btn-green dropdown-toggle" data-toggle="dropdown"><span class="fa fa-pencil"></span> Edit</a>
                                                    <ul class="dropdown-menu pull-right" role="menu">
                                                        <li><a href="#">Action</a></li>
                                                        <li><a href="#">Another action</a></li>
                                                        <li><a href="#">Something else here</a></li>
                                                        <li class="divider"></li>
                                                        <li><a href="#">Separated link</a></li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><span class="userName">Jane Smith</span></td>
                                            <td>September 13, 2013</td>
                                            <td><span class="label label-info">PENDING</span></td>
                                            <td>
                                                <div class="btn-group">
                                                    <a class="btn btn-xs btn-round btn-o btn-green dropdown-toggle" data-toggle="dropdown"><span class="fa fa-pencil"></span> Edit</a>
                                                    <ul class="dropdown-menu pull-right" role="menu">
                                                        <li><a href="#">Action</a></li>
                                                        <li><a href="#">Another action</a></li>
                                                        <li><a href="#">Something else here</a></li>
                                                        <li class="divider"></li>
                                                        <li><a href="#">Separated link</a></li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><span class="userName">Rust Cohle</span></td>
                                            <td>July 8, 2014</td>
                                            <td><span class="label label-warning">INACTIVE</span></td>
                                            <td>
                                                <div class="btn-group">
                                                    <a class="btn btn-xs btn-round btn-o btn-green dropdown-toggle" data-toggle="dropdown"><span class="fa fa-pencil"></span> Edit</a>
                                                    <ul class="dropdown-menu pull-right" role="menu">
                                                        <li><a href="#">Action</a></li>
                                                        <li><a href="#">Another action</a></li>
                                                        <li><a href="#">Something else here</a></li>
                                                        <li class="divider"></li>
                                                        <li><a href="#">Separated link</a></li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><span class="userName">Antony Iglesias</span></td>
                                            <td>September 10, 2014</td>
                                            <td><span class="label label-danger">SUSPENDED</span></td>
                                            <td>
                                                <div class="btn-group">
                                                    <a class="btn btn-xs btn-round btn-o btn-green dropdown-toggle" data-toggle="dropdown"><span class="fa fa-pencil"></span> Edit</a>
                                                    <ul class="dropdown-menu pull-right" role="menu">
                                                        <li><a href="#">Action</a></li>
                                                        <li><a href="#">Another action</a></li>
                                                        <li><a href="#">Something else here</a></li>
                                                        <li class="divider"></li>
                                                        <li><a href="#">Separated link</a></li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
                            <div class="table-overflow">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>PROPERTY</th>
                                            <th>RATING</th>
                                            <th>FAVS</th>
                                        </tr>
                                    </thead>
                                    <tbody class="table">
                                        <tr>
                                            <td><span class="propName">Modern Residence in New York</span></td>
                                            <td>
                                                <span class="fa fa-star text-yellow"></span>
                                                <span class="fa fa-star text-yellow"></span>
                                                <span class="fa fa-star text-yellow"></span>
                                                <span class="fa fa-star text-yellow"></span>
                                                <span class="fa fa-star-o text-yellow"></span>
                                                (146)
                                            </td>
                                            <td><span class="icon-heart text-red"></span> 54</td>
                                        </tr>
                                        <tr>
                                            <td><span class="propName">Hauntingly Beautiful Estate</span></td>
                                            <td>
                                                <span class="fa fa-star text-yellow"></span>
                                                <span class="fa fa-star text-yellow"></span>
                                                <span class="fa fa-star text-yellow"></span>
                                                <span class="fa fa-star text-yellow"></span>
                                                <span class="fa fa-star text-yellow"></span>
                                                (123)
                                            </td>
                                            <td><span class="icon-heart text-red"></span> 67</td>
                                        </tr>
                                        <tr>
                                            <td><span class="propName">Sophisticated Residence</span></td>
                                            <td>
                                                <span class="fa fa-star text-yellow"></span>
                                                <span class="fa fa-star text-yellow"></span>
                                                <span class="fa fa-star text-yellow"></span>
                                                <span class="fa fa-star text-yellow"></span>
                                                <span class="fa fa-star text-yellow"></span>
                                                (120)
                                            </td>
                                            <td><span class="icon-heart text-red"></span> 87</td>
                                        </tr>
                                        <tr>
                                            <td><span class="propName">House With a Lovely Glass Roof</span></td>
                                            <td>
                                                <div class="stars">
                                                    <span class="fa fa-star text-yellow"></span>
                                                    <span class="fa fa-star text-yellow"></span>
                                                    <span class="fa fa-star text-yellow"></span>
                                                    <span class="fa fa-star text-yellow"></span>
                                                    <span class="fa fa-star-o text-yellow"></span>
                                                    (170)
                                                </div>
                                            </td>
                                            <td><span class="icon-heart text-red"></span> 99</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">Inbox</div>
                        <div class="row tableContainer">
                            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                <a href="#" class="btn btn-sm btn-blue mb5"><span class="icon-drawer"></span> Archive</a>
                                <a href="#" class="btn btn-sm btn-yellow mb5"><span class="icon-ban"></span> Report Spam</a>
                                <a href="#" class="btn btn-sm btn-red mb5"><span class="icon-trash"></span> Delete</a>
                                <div class="btn-group mb5">
                                    <a data-toggle="dropdown" class="btn btn-sm btn-gray dropdown-toggle">
                                        <span class="dropdown-label">Bulk Actions</span> <span class="caret"></span>
                                    </a>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#">Mark as read</a></li>
                                        <li><a href="#">Mark as unread</a></li>
                                        <li><a href="#">Mark as important</a></li>
                                        <li><a href="#">Mark as not important</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
                                <div class="input-group input-group-sm mb5">
                                    <input type="text" class="form-control" placeholder="Search...">
                                    <span class="input-group-btn"><a class="btn btn-sm btn-green"><span class="icon-magnifier"></span></a></span>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
                                <div class="btn-group pull-right mb5">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-sm btn-o btn-gray dropdown-toggle" data-toggle="dropdown">
                                        1-50 of 121
                                        <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li class="disabled"><a href="#">Newest</a></li>
                                            <li><a href="#">Oldest</a></li>
                                        </ul>
                                    </div>
                                    <button type="button" class="btn btn-sm btn-gray"><span class="fa fa-angle-left"></span></button>
                                    <button type="button" class="btn btn-sm btn-gray"><span class="fa fa-angle-right"></span></button>
                                </div>
                            </div>
                        </div>
                        <div class="table-overflow">
                            <table class="table" id="inboxTable">
                                <thead>
                                    <tr>
                                        <th style="width:10px;"><input type="checkbox"></th>
                                        <th style="width:10px;"><span class="fa fa-star-o"></span></th>
                                        <th><span class="fa fa-sort sortIcon"></span><span class="fa fa-caret-up sortIconAsc"></span><span class="fa fa-caret-down sortIconDesc"></span> FROM</th>
                                        <th><span class="fa fa-sort sortIcon"></span><span class="fa fa-caret-up sortIconAsc"></span><span class="fa fa-caret-down sortIconDesc"></span> SUBJECT</th>
                                        <th style="width:100px;">DATE</th>
                                    </tr>
                                </thead>
                                <tbody class="table">
                                    <tr>
                                        <td><input type="checkbox"></td>
                                        <td><span class="fa fa-star-o text-yellow"></span></td>
                                        <td>John Smith</td>
                                        <td>Modern Residence in New York</td>
                                        <td>6:07 pm</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox"></td>
                                        <td><span class="fa fa-star-o text-yellow"></span></td>
                                        <td>Jane Smith</td>
                                        <td>Hauntingly Beautiful Estate</td>
                                        <td>Sep 27</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox"></td>
                                        <td><span class="fa fa-star-o text-yellow"></span></td>
                                        <td>Rust Cohle</td>
                                        <td>Sophisticated Residence</td>
                                        <td>Sep 25</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox"></td>
                                        <td><span class="fa fa-star-o text-yellow"></span></td>
                                        <td>Antony Iglesias</td>
                                        <td>House With a Lovely Glass Roof</td>
                                        <td>Sep 23</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox"></td>
                                        <td><span class="fa fa-star-o text-yellow"></span></td>
                                        <td>John Smith</td>
                                        <td>Modern Residence in New York</td>
                                        <td>Sep 21</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>

        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/jquery-ui.min.js"></script>
        <script src="js/jquery-ui-touch-punch.js"></script>
        <script src="js/jquery.placeholder.js"></script>
        <script src="js/bootstrap.js"></script>
        <script src="js/jquery.touchSwipe.min.js"></script>
        <script src="js/jquery.slimscroll.min.js"></script>
        <script src="js/jquery.visible.js"></script>
        <script src="http://maps.googleapis.com/maps/api/js?sensor=true&amp;libraries=geometry&amp;libraries=places" type="text/javascript"></script>
        <script src="js/infobox.js"></script>
        <script src="js/tablesorter.js"></script>
        <script src="js/jquery.tagsinput.min.js"></script>
        <script src="js/bootstrap-datepicker.js"></script>
        <script src="js/app.js" type="text/javascript"></script>
        <script src="js/table.js"></script>
    </body>
</html>